<template>
  <view class="fm-menu-card" hover-class="active" @click="goShop">
    <view class="fm-menu-panel">
      <view class="fm-menu-panel__hd">
        <fm-image :src="avatar" size="80px" mode="aspectFill" border-radius="2px"></fm-image>
      </view>
      <view class="fm-menu-panel__bd">
        <view class="fm-menu-cell">
          <view class="fm-menu-cell__bd">
            <view class="fm-menu-cell__bd__title">{{ businessName + '(' + branchName + ')' }}</view>
            <view class="fm-menu-cell__bd__desc">营业时间: {{ hour }}</view>
          </view>
          <view class="fm-menu-cell__ft">
            <view>
              <view>其他</view>
              <view>门店</view>
            </view>
            <fm-icon icon="icon-chevron-right" color="inherit" size="16px"></fm-icon>
          </view>
        </view>
        <view class="fm-menu-panel__bd__desc">门店地址: {{ address }}</view>
      </view>
    </view>

  </view>
</template>

<script>
import FmImage from '@/components/FmImage'
import FmIcon from '@/components/FmIcon'
export default {
  name: 'MenuShop',
  components: {
    FmImage,
    FmIcon
  },
  props: {
    businessName: String,
    branchName: String,
    address: String,
    avatar: String,
    hour: String
  },
  methods: {
    goShop () {
      this.$wxp.navigateTo({
        url: '/pages/shop/main'
      })
    }
  }
}
</script>

<style lang="less">
@import "../../asset/style/_variable.less";

.fm-menu-card {
  position: relative;
  display: block;
  background-color: @--fill-base;
  padding-bottom: 8px;

  &::after {
    .setActive();
  }

  &.active {
    &::after {
      opacity: .08;
    }
  }
}

.fm-menu-panel {
  display: flex;
  padding: 0 16px;
}

.fm-menu-panel__hd {
  flex: none;
  margin-right: 16px;
}

.fm-menu-panel__bd {
  flex: auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.fm-menu-panel__bd__desc {
  font-size: 11px;//@--font-size-small;
  color: @--color-text-secondary;
  .setEllip(2);
}

.fm-menu-cell {
  // flex: auto;
  display: flex;
}

.fm-menu-cell__bd {
  flex: auto;
}

.fm-menu-cell__bd__title {
  font-size: @--font-size-large;
  font-weight: @--font-weight-blod;
  color: @--color-text-primary;
  .setEllip();
}

.fm-menu-cell__bd__desc {
  font-size: @--font-size-small;
  color: @--color-text-secondary;
  .setEllip(2);
}

.fm-menu-cell__ft {
  position: relative;
  padding-left: 8px;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  // font-size: @--font-size-small;
  color: @--color-text-secondary;

  &::before {
    .setActive();
  }

  &.active {
    &::before {
      opacity: .08;
    }
  }
}

</style>
